<template>
	<VCharts ref="chart" :option="option" :autoresize="autoResize" :style="{ width, height }" />
</template>

<script setup lang="ts">
import VCharts from 'vue-echarts';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart, LineChart, PieChart, RadarChart, GaugeChart } from 'echarts/charts';
import { TooltipComponent, LegendComponent, GridComponent, TitleComponent } from 'echarts/components';
echarts.use([CanvasRenderer, BarChart, LineChart, PieChart, RadarChart, GaugeChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent]);
defineProps({
	option: { type: Object, default: () => ({}) },
	autoResize: { type: Boolean, default: true },
	width: { type: String, default: '100%' },
	height: { type: String, default: '100%' }
});

const chart = ref(null);
defineExpose({ chart });
</script>

<style scoped lang="less"></style>
